<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS常见列表属性</title>
</head>
<style>
    /*
    列表相关的属性可以作用在ul,ol,li元素上

    list-style-type:设置列表符号
      常用属性值:none 不显示前面的表示
               square:实心方块
               disc:圆形
               decimal:数字
               lower-alpha:小写字母
               upper-alpha:大写字母

    list-style-position:设置列表符号的位置
       常用属性值:inside:在li里面,将列表符号归纳到与文本的范围内
                outside:在li外面,将列表符号置于到与文本的范围外

    list-style-image:自定义列表符号,只要设置了image,就会覆盖掉type的属性效果
      常用属性值:url(图片地址),"让图片充当列表符号"

    list-style:复合属性,  没有数量顺序要求
    */

    ul {

        list-style-position: outside;
        list-style-image: url("../../resource/img/img01.png");
        list-style-type: square;
    }

    ul {
        list-style: square outside url("../../resource/img/img01.png");
    }

    li {
        background-color: red;
    }
</style>
<body>
<ul>
    <li>震惊!两男子居然在教室里做出这种事</li>
    <li>成为好男人的五个步骤</li>
    <li>如何让富婆爱上你</li>
</ul>
</body>
</html>